<template>
  <div class="login">
    <el-card>
      <template #header>
        <div>
          <h3>餐饮管理系统</h3>
          <span>{{ selectRole == 'admin' ? '管理员':'商家' }}登录</span>
          <div>
            <el-button @click="selectRole ='admin'" :type="selectRole == 'admin' ?'primary':''">管理员</el-button>
            <el-button @click="selectRole = 'business'" :type="selectRole == 'business' ? 'primary' : ''">商家</el-button>
          </div>
        </div>
      </template>
      <el-form>
        <el-form-item>
          <el-input placeholder="请输入账号" v-model="loginData.username"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入密码" v-model="loginData.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue"
import { useRouter } from "vue-router"
import axios from "axios"

const $router = useRouter()

let selectRole = ref("admin")
let loginData = reactive({
  username: "admin",
  password: "admin"
})
const login = () => { 
  // 处理登录逻辑
  //axios.get()
  //axios.post()
  //axios({
  //  url: "/",
  //  method:"get|post|delete|put",
  //})
  if (selectRole.value == 'admin') {
    axios.get(`http://127.0.0.1:8080/admin?username=${loginData.username}&password=${loginData.password}`)
      .then(resp => {
        if (resp.data.code === 2000) {
          ElMessage.success(resp.data.message)
          // 将登录的信息保存到sessionStorage中
          sessionStorage.setItem("loginInfo", JSON.stringify(resp.data.data))
          // 通过路由跳转到首页
          $router.push("/")
        } else {
          ElMessage.error(resp.data.message)
        }
      })
  } else { 
    axios.get(`http://127.0.0.1:8080/business?username=${loginData.username}&password=${loginData.password}`)
      .then(resp => {
        if (resp.data.code === 2000) {
          ElMessage.success(resp.data.message)
          // 将登录的信息保存到sessionStorage中
          sessionStorage.setItem("loginInfo", JSON.stringify(resp.data.data))
          // 通过路由跳转到首页
          $router.push("/")
        } else {
          ElMessage.error(resp.data.message)
        }
      })
  }
}
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #E7EEFF;
  padding-top: 150px;
  .el-card {
    width: 400px;
    margin: 0 auto;
  }

}
</style>